revision:
code:
<canvas id="canvas-1" height="500" width="500"></canvas>
<style>
#canvas-1{border:0.2vw dotted black;}
</style>
<script>
(() => {
const canvas = document.querySelector("#canvas-1");
const width = 500;
const height = 500;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
const drawFillRect = (x, y, width, height, hexColor, ctx) =>{
ctx.beginPath()
ctx.rect(x, y, width, height)
ctx.fillStyle = hexColor
ctx.fill()
}
// background color
drawFillRect(20, 20, 460, 460, "#FAFCF1", ctx)
// rectangle at the center
drawFillRect((width/2)-100, (height/2)-150, 200, 300, "#F26D85", ctx)
// rectangle 2
drawFillRect(280, 20, 120, 190, "#E97FF4", ctx)
// circle 1
ctx.beginPath()
ctx.arc(347, 260, 50, 0, 2*Math.PI)
ctx.fillStyle = "#9193F6"
ctx.fill()
// rectangle 3
drawFillRect(80, 300, 100, 110, "#A4F3F8", ctx)
// triangle
ctx.beginPath();
ctx.moveTo(250, 400);
ctx.lineTo(200, 450);
ctx.lineTo(300, 450);
ctx.closePath()
ctx.fillStyle = "#B6FAC1"
ctx.fill();
})()
</script>
code:
<canvas id="canvas-2" height="800" width="500"></canvas>
<style>
#canvas-2{border:1vw dashed blue;}
</style>
<script>
(() => {
const canvas = document.querySelector("#canvas-2");
const width = 800;
const height = 500;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
const drawFillRect = (x, y, width, height, hexColor, ctx) =>{
ctx.beginPath()
ctx.rect(x, y, width, height)
ctx.fillStyle = hexColor
ctx.fill()
}
// background color
drawFillRect(40, 40, 740, 740, "skyblue", ctx)
// rectangle at the right
drawFillRect((width/2)+100, (height/2)-100, 300, 400, "darkgreen", ctx)
// rectangle at the left top
drawFillRect(80, 120, 220, 90, "blue", ctx)
// circle 1
ctx.beginPath()
ctx.arc(447, 360, 90, 0, 2*Math.PI)
ctx.fillStyle = "burlywood"
ctx.fill()
// rectangle at the left bottom
drawFillRect(10, 400, 100, 110, "pink", ctx)
// triangle
ctx.beginPath();
ctx.moveTo(250, 240);
ctx.lineTo(150, 450);
ctx.lineTo(350, 450);
ctx.closePath()
ctx.fillStyle = "red"
ctx.fill();
})()
</script>
code:
<canvas id="canvas-3" heigt="10" width="700"></canvas>
<style>
#canvas-3{border:0.31vw inset burlywood;}
</style>
<script>
(() => {
const canvas = document.querySelector("#canvas-3");
const width = 700;
const height = 500;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
const drawFillRect = (x, y, width, height, hexColor, ctx) =>{
ctx.beginPath()
ctx.rect(x, y, width, height)
ctx.fillStyle = hexColor
ctx.fill()
}
// background color
drawFillRect(0, 0, 700, 700, "lightgrey", ctx)
// first row - rectangle 1
drawFillRect(1,1, 100,100,"black", ctx)
// first row - circle 1
ctx.beginPath()
ctx.arc(155, 52, 53, 0, 2*Math.PI)
ctx.fillStyle = "yellow"
ctx.fill()
// first row - triangle 1
ctx.beginPath();
ctx.moveTo(258, 0);
ctx.lineTo(190, 100);
ctx.lineTo(320, 100);
ctx.closePath()
ctx.fillStyle = "red"
ctx.fill();
// first row - rectangle 2
drawFillRect(320,0, 100,100,"yellow", ctx)
// first row - circle 2
ctx.beginPath()
ctx.arc(470, 50, 50, 0, 2*Math.PI)
ctx.fillStyle = "black"
ctx.fill()
// first row - triangle 2
ctx.beginPath();
ctx.moveTo(560, 0);
ctx.lineTo(500, 100);
ctx.lineTo(620, 100);
ctx.closePath()
ctx.fillStyle = "yellow"
ctx.fill();
// first row - rectangle 3
drawFillRect(610,0, 100,100,"red", ctx)
// second row - circle 1
ctx.beginPath()
ctx.arc(60, 160, 60, 0, 2*Math.PI)
ctx.fillStyle = "red"
ctx.fill()
// second row - triangle 1
ctx.beginPath();
ctx.moveTo(170, 105);
ctx.lineTo(100, 210);
ctx.lineTo(240, 210);
ctx.closePath()
ctx.fillStyle = "yellow"
ctx.fill();
// second row - rectangle 1
drawFillRect(240,100, 110,110,"black", ctx)
// second row - circle 2
ctx.beginPath()
ctx.arc(410, 160, 60, 0, 2*Math.PI)
ctx.fillStyle = "yellow"
ctx.fill()
// second row - triangle 2
ctx.beginPath();
ctx.moveTo(530,100);
ctx.lineTo(450, 210);
ctx.lineTo(610, 210);
ctx.closePath()
ctx.fillStyle = "red"
ctx.fill();
// second row - rectangle 3
drawFillRect(610,100, 110,110,"yellow", ctx)
// third row - triangle 1
ctx.beginPath();
ctx.moveTo(100, 220);
ctx.lineTo(0, 510);
ctx.lineTo(250, 510);
ctx.closePath()
ctx.fillStyle = "black"
ctx.fill();
// second row - rectangle 1
drawFillRect(240,220, 240,280,"yellow", ctx)
// second row - circle 2
ctx.beginPath()
ctx.arc(590, 360, 110, 0, 2*Math.PI)
ctx.fillStyle = "red"
ctx.fill()
})()
</script>
<div>
<canvas id="canvas-4" width="500" height="500"></canvas>
<button onclick="downloadCanvasContents()">Download generated Sierpinski triangle</button>
</div>
<style>
</style>
<script>
const c = document.getElementById('canvas-4');
const ctx = c.getContext('2d');
const createTriangle = (pos, sidelen) => {
ctx.beginPath();
ctx.moveTo(...pos); // go to left vertex
// note that (0,0) in canvas is the top left, so 'up' on the vertical component would use substraction.
ctx.lineTo(pos[0] + sidelen / 2, pos[1] - sidelen * Math.sin(Math.PI / 3)); // draw line from left
vertex to top vertex
ctx.lineTo(pos[0] + sidelen, pos[1]); // draw line from top vertex to right vertex
ctx.lineTo(...pos); // draw line from right vertex back to left vertex
ctx.closePath();
ctx.fill(); // fill triangle
};
const createSierpinskiTriangle = (pos, sidelen, depth) => {
const innerTriangleSidelen = sidelen / 2; // side length of inner triangles is half the side length of
the outer triangle
const innerTrianglesPositions = [
pos,
[pos[0] + innerTriangleSidelen, pos[1]],
[pos[0] + innerTriangleSidelen / 2, pos[1] - Math.sin(Math.PI / 3) * innerTriangleSidelen],
]; // these positions are the same as what was used in the createTriangle function
if (depth === 0) {
innerTrianglesPositions.forEach((trianglePosition) => {
createTriangle(trianglePosition, innerTriangleSidelen);
});
} else {
innerTrianglesPositions.forEach((trianglePosition) => {
createSierpinskiTriangle(trianglePosition, innerTriangleSidelen, depth - 1);
});
}
};
createSierpinskiTriangle([0, 500], 500, 6);
const downloadCanvasContents = () => {
const link = document.createElement('a'); // create link element
link.download = 'Sierpinski Triangle.png'; // set download attribute
link.href = c.toDataURL(); // set the link's URL to the data URL to be downloaded
link.click(); // click the element and download on the user's browser
};
</script>
</pre>